// packageA/pages/textPage/index.js
import * as echarts from '../../../components/ec-canvas/echarts';
var http = require('../../../utils/http');
var api = require('../../../utils/api');
Page({

    /**
     * 页面的初始数据
     */
    data: {
        ec: {
            lazyLoad: true
        },
        chart: null,
        dakadate:['2023-2-22','2023-2-24','2023-2-25','2023-2-27','2023-2-28','2023-3-1',]
    },

    getLineData() {
        http.postHttp(api.getLineData, {
                child_id: 59,
                rtype: "qgds",
                month: 6,
            },
            (result) => {
                this.oneComponent.init((canvas, width, height, dpr) => {
                    const chart = echarts.init(canvas, null, {
                        width: width,
                        height: height,
                        devicePixelRatio: dpr, // new
                        locale: "ZH"
                    });
                    this.setOption(chart, result);
                    chart.dispatchAction({
                        type: "showTip",
                        seriesIndex: 0, // 显示第几个series，从0开始
                        dataIndex: 0 // 显示第几个数据，从0开始
                    })
                    this.chart = chart;
                    return chart;
                });
            },
            (err) => {
                console.log(err);
            },
        )

    },
    selectDateFun(e){
        console.log(e.detail);
        wx.showToast({
          title: e.detail,
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.oneComponent = this.selectComponent('#mychart-dom-bar');
    },
   
    setOption(chart, result) {
        let data = result.data.right
        let data2 = result.data.left
        var option = {
            color: ['#89DFA1', '#77A8DA'],
            tooltip: {
                show: true,
                trigger: 'axis',
                axisPointer: {
                    animation: true
                },
                formatter: (params) => {
                    let data = (params[0].axisValueLabel)
                    let tem = ''
                    params.forEach(ele => {
                        tem += ele.seriesName + '：' + ele.value[1] + ' DS ' + '\n'
                    })
                    tem = data + '\n' + tem
                    return ""
                },
            },
            grid: {
                left: '3%',
                right: '5%',
                bottom: '13%',
                containLabel: true
            },
            xAxis: [{
                type: 'time',
                // boundaryGap: true,
                minInterval: 3600 * 24 * 1000 * 28,
                splitLine: {
                    show: true, //是否显示竖向网格线
                },
                axisLabel: {
                    padding: [23, 0, 0, 0],
                    show: true, //是否显示x轴数据
                    // interval: 0, //使x轴文字显示全
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false
                },
                position: "bottom",
                axisPointer: {
                    show: true,
                    type: "line",
                    label: {
                        backgroundColor: 'transparent',
                        show: true,
                        color: '#7DC9EA',
                        formatter: (parame) => {
                            console.log(parame.value);
                            let date = new Date(parame.value)
                            let formatObj = {
                                y: date.getFullYear(),
                                m: date.getMonth() + 1,
                                d: date.getDate()
                            }
                            return `${formatObj.y}-${formatObj.m}-${formatObj.d}`

                        }

                    },
                    lineStyle: {
                        type: "dashed",
                        color: '#96ACB3E6',
                    }
                },

            }],
            yAxis: [{
                type: 'value',
                inverse: true,
                show: false, //是否显示y轴
                splitLine: {
                    show: false, //是否显示横向网格线
                },
                max: function (value) {
                    let max = Math.ceil(value.max + (value.max - value.min) * 0.2)
                    return max
                },
                // max: function (value) {
                //     return value.max
                //   },
            }],
            dataZoom: [{
                    type: 'slider', //滑动条
                    brushSelect: false,
                    start: 0, //初始化时，滑动条宽度开始标度
                    end: 100, //初始化时，滑动条宽度结束标度
                    height: 25,
                    bottom: '22px',
                    backgroundColor: 'transparent',
                    borderColor: 'transparent',
                    moveHandleSize: 5,
                    moveHandleStyle: {
                        color: 'transparent'
                    },
                    emphasis: {
                        moveHandleStyle: {
                            color: 'transparent'
                        }
                    },
                    handleSize: '120%',
                    handleIcon: "path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z",
                    handleStyle: {
                        color: 'rgba(123, 154, 204, 0.1)',
                        global: true, // 缺省为 false
                        shadowBlur: 6,
                        shadowColor: 'rgba(123, 154, 204, 0.2)',
                        shadowOffsetX: 0, // 阴影偏移x轴多少
                        shadowOffsetY: 0 // 阴影偏移y轴多少
                    },
                    fillerColor: 'transparent',
                    textStyle: {
                        color: 'transparent'
                    },
                    dataBackground: {
                        lineStyle: {
                            color: 'transparent'
                        },
                        areaStyle: {
                            color: 'transparent'
                        }
                    },
                    showDataShadow: false
                },
                {
                    type: 'inside', //内置滑动，随鼠标滚轮展示
                    start: 0, //初始化时，滑动条宽度开始标度
                    end: 100 //初始化时，滑动条宽度结束标度
                }
            ],
            series: [{
                    name: '右眼',
                    type: 'line',
                    z: 999,
                    // stack: 'Total',
                    smooth: true,
                    symbolSize: 8,
                    itemStyle: {
                        emphasis: {
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: '#000'
                                },
                                backgroundColor: '#EEF3FF', //不能是rgba形式，否则会导致底下的三角形无法遮盖蓝色边框
                                formatter: (parame) => {
                                    return '{a|' + parame.value[1] + '}'
                                },
                                rich: {
                                    a: {
                                        color: '#000',
                                        backgroundColor: '#fff',
                                        padding: [5, 10],
                                        borderRadius: 4,
                                        borderWidth: 1,
                                        borderColor: '#d1dad7',
                                        shadowColor: '#d1dad7',
                                        shadowBlur: 4,
                                        shadowOffsetX: 1,
                                        shadowOffsetY: 1,
                                    },

                                }
                            }
                        }
                    },
                    areaStyle: {
                        origin: 'end',
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(137, 223, 161,0.3)'
                        }, {
                            offset: 1,
                            color: 'rgba(137, 223, 161,0)'
                        }])
                    },
                    markLine: {
                        silent: true,
                        lineStyle: {
                            normal: {
                                color: '#EDB5A1E6' // 这儿设置安全基线颜色
                            }
                        },
                        data: [{
                            yAxis: 0 //这儿定义基准线的数值为多少
                        }],
                        symbol: "none", //去掉警戒线最后面的箭头
                        label: {
                            normal: {
                                position: "start",
                                formatter: '0.00', // 这儿设置安全基线
                                color: "#EDB5A1E6"
                            }
                        }
                    },
                    data: data
                },
                {
                    name: '左眼',
                    z: 999,
                    type: 'line',
                    // stack: 'Total',
                    smooth: true,
                    symbolSize: 8,
                    itemStyle: {
                        emphasis: {
                            label: {
                                show: true,
                                position: 'auto',
                                textStyle: {
                                    color: '#000'
                                },
                                backgroundColor: '#EEF3FF', //不能是rgba形式，否则会导致底下的三角形无法遮盖蓝色边框
                                formatter: (parame) => {
                                    return '{a|' + parame.value[1] + '}'
                                },
                                rich: {
                                    a: {
                                        color: '#000',
                                        backgroundColor: '#fff',
                                        padding: [5, 10],
                                        borderRadius: 4,
                                        borderWidth: 1,
                                        borderColor: '#d1dad7',
                                        shadowColor: '#d1dad7',
                                        shadowBlur: 4,
                                        shadowOffsetX: 1,
                                        shadowOffsetY: 1,
                                    },

                                }
                            }
                        }
                    },
                    areaStyle: {
                        origin: "end",
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(119, 168, 218,0.3)'
                        }, {
                            offset: 1,
                            color: 'rgba(119, 168, 218,0)'
                        }])
                    },
                    markLine: {
                        silent: true,
                        lineStyle: {
                            normal: {
                                color: '#EDB5A1E6' // 这儿设置安全基线颜色
                            }
                        },
                        data: [{
                            yAxis: 0 //这儿定义基准线的数值为多少
                        }],
                        symbol: "none", //去掉警戒线最后面的箭头
                        label: {
                            normal: {
                                position: "start",
                                formatter: '0.00', // 这儿设置安全基线
                                color: "#EDB5A1E6"
                            }
                        }
                    },

                    data: data2
                },

            ]
        };
        chart.setOption(option);
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})